<template>
  <div class="login-container">
    <div style="width: 1200px; margin: 0px auto">
      <div style="height: 80px; line-height: 80px">
        <div class="project-name">城市国土空间监测交验预审平台</div>
      </div>
    </div>
    <div
      style="
        height: 750px;
        width: 100%;
        align-items: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        z-index: 10;
        background-image: url('/static/bg.png');
      "
    >
      <div style="width: 1200px; margin: 10% auto">
        <div style="width: 50%; float: left">
          <img class="login-bg" src="/static/bg_t.png" />
        </div>
        <div class="login-form" style="width: 50%; float: left">
          <div class="form-user" @keypress="loginPress">
            <div class="login-text">
              <div>
                <div>用户登录</div>
                <div class="login-line"></div>
              </div>
              <div style="flex: 1"></div>
            </div>
            <div class="login-text-small"></div>
            <div class="item">
              <div class="input-icon el-icon-user"></div>
              <input
                type="text"
                v-focus
                v-model="userInfo.userName"
                placeholder="请输入账号"
              />
            </div>
            <div class="item">
              <div class="input-icon el-icon-lock"></div>
              <input
                type="password"
                v-focus
                v-model="userInfo.password"
                placeholder="请输入密码"
              />
            </div>
            <div class="item" style="margin-bottom: 10px">
              <div class="input-icon el-icon-mobile"></div>

              <input
                v-focus
                type="text"
                v-model="userInfo.verificationCode"
                placeholder="输入验证码"
              />
              <div class="code" @click="getVierificationCode">
                <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
              </div>
            </div>

            <!-- <p>
              <a
                style="
                  color: blue;
                  text-align: right;
                  float: right;
                  cursor: pointer;
                "
                @click="getshowRgis()"
                >立即注册</a
              >
            </p> -->
          </div>
          <div class="loging-btn">
            <el-button
              size="large"
              :loading="loading"
              color="#3a6cd1"
              :dark="true"
              @click="login"
              long
            >
              <span v-if="!loading">登录</span>
              <span v-else>正在登录...</span>
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="login-footer">
      <a
        style="text-decoration: none"
        >版权所有：北京图拓扑科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;安徽省测绘产品质量监督检验站
        <br /><br />
        技术支持：北京图拓扑科技有限公司</a
      >
    </div>

    <el-dialog title="用户注册"   v-model="dialogFormVisible" style="width:30%;">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
     
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userTrueName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.Phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位名称" :label-width="formLabelWidth">
          <el-input v-model="form.workUnit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属区域" :label-width="formLabelWidth">
          <el-cascader
            :options="form.data"
             v-model="form.selectedValues"
            :props="{ multiple: true, checkStrictly: true }"
            clearable></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getRegisAdd"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script >
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
import http from "@/../src/api/http.js";
export default defineComponent({
  setup(props, context) {
    store.commit("clearUserInfo", "");
    const loading = ref(false);
    const dialogFormVisible =ref(false);
    const codeImgSrc = ref("");
    const userInfo = reactive({
      userName: "",
      password: "",
      verificationCode: "",
      UUID: undefined,
    });
    const form =reactive(
      {
        userName: "",
        userTrueName: "",
        selectedValues: [],
        data:[],
        Phone: "",
        workUnit: "",
        address:"",
      })
      let appContext = getCurrentInstance().appContext;
    let $message = appContext.config.globalProperties.$message;
    let $alert =appContext.config.globalProperties.$alert;
    const getVierificationCode = () => {
      http.get("/api/User/getVierificationCode").then((x) => {
        codeImgSrc.value = "data:image/png;base64," + x.img;
        userInfo.UUID = x.uuid;
      });
    };
    getVierificationCode();

    const getRgion=()=>
    {
      http.get("/api/sys_department/GetRegion", {}, true).then((x) => {
      
      if (!x.Status) {
        return $message.error(x.message);
      }
     
       form.data=x.Data;
      console.log(form.data)
    });
    }
 
  
    let router = useRouter();

    const login = () => {
      if (!userInfo.userName) return $message.error("请输入用户名");
      if (!userInfo.password) return $message.error("请输入密码");
      if (!userInfo.verificationCode) {
        return $message.error("请输入验证码");
      }
      loading.value = true;
      http.post("/api/user/login", userInfo, "正在登录....").then((result) => {
        if (!result.status) {
          loading.value = false;
          getVierificationCode();
          return $message.error(result.message);
        }
        $message.success("登录成功,正在跳转!");
        store.commit("setUserInfo", result.data);
        router.push({ path: "/" });
      });
    };

    const getshowRgis = () => {dialogFormVisible.value=true; getRgion();};

    const getRegisAdd = () =>
    {
  

      if (!form.userName) return $message.error("请输入用户名");
      // if (!form.UserPwd) return $message.error("请输入密码");
      if (!form.userTrueName) {return $message.error("请输入姓名");}
      if (!form.Phone) {return $message.error("请输入联系方式");}
      if (!form.workUnit) {return $message.error("请输入单位名称");}
      if (!form.address) {return $message.error("请输入单位地址");}
      if (form.selectedValues.length==0) {return $message.error("请输入单位地址");}

        var xzqdm="";
        var xzqdmName="";
        var cityDm="";
        var cityName="";
        var ProvCode="";
        var ProvName="";
        console.log('*************',form.selectedValues.length)
        if(form.selectedValues[0].length==3)
        {
          
          xzqdm=form.selectedValues[0][2].split('|')[0];
          xzqdmName=form.selectedValues[0][2].split('|')[1];
          cityDm=form.selectedValues[0][1].split('|')[0];
          cityName=form.selectedValues[0][1].split('|')[1];
          ProvCode=form.selectedValues[0][0].split('|')[0];
          ProvName=form.selectedValues[0][0].split('|')[1];
        }else if(form.selectedValues[0].length==2)
        {
          cityDm=form.selectedValues[0][1].split('|')[0];;
          cityName=form.selectedValues[0][1].split('|')[1];
          ProvCode=form.selectedValues[0][0].split('|')[0];
          ProvName=form.selectedValues[0][0].split('|')[1];
        }else if(form.selectedValues[0][0].length==1)
        {
          ProvCode=form.selectedValues[0][0];
          ProvName=form.selectedValues[0][0].split('|')[1];
        }
        var parms={
          "mainData": {
            "UserName":form.userName ,
            "Xzqdm": xzqdm,
            "ProvCode":ProvCode ,
            "CityDm" :cityDm ,
            "XzqName":xzqdmName  ,
            "ProvMc":ProvName,
            "CityMC":cityName ,
            "UserTrueName":form.userTrueName ,
            "Phone" :form.Phone ,
            "WorkUnit":form.workUnit ,
            "Address":form.address ,
          
          },"detailData": null,"delKeys": null
        };
        http.post("/api/Sys_User/RegisUser",parms).then(result => {
          $alert(result.message, '消息提示', {
          confirmButtonText: '确定',
          callback: action => {
            dialogFormVisible.value=false;
          }
        });
        })

    }

    const loginPress = (e) => {
      if (e.keyCode == 13) {
        login();
      }
    };
    const openUrl = (url) => {
      window.open(url, "_blank");
    };
    return {
      loading,
      dialogFormVisible,
      codeImgSrc,
      getVierificationCode,
      getRgion,
      getRegisAdd,
      login,
      getshowRgis,
      userInfo,
      loginPress,
      openUrl,
      form,
        formLabelWidth: '120px',
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
});
</script>
<style lang="less" scoped>
.login-container {
  // display: flex;
  width: 100%;
  height: 100%;
  background: rgb(246, 247, 252);
  // justify-content: flex-end;
  // align-items: center;
}

.login-form {
  align-items: center;
  width: 75%;
  display: flex;
  flex-direction: column;
  // margin-right: 150px;
  z-index: 999;
  .form-user {
    // margin: 25px 0;

    .item {
      border-radius: 5px;
      border: 1px solid #ececec;
      display: flex;
      margin-bottom: 30px;
      background: #ffff;
      height: 45px;
      padding-left: 20px;
      display: flex;

      .code {
        position: relative;
        cursor: pointer;
        width: 74px;
        padding: 5px 10px 0 0;
      }

      .input-icon {
        line-height: 45px;
        color: #7a7a7a;
        padding-right: 20px;
      }
    }
  }

  input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

  input {
    background: white;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    border: 0;
    outline: none;
    font-size: 16px;
    line-height: 20px;
  }
}

.form-user,
.loging-btn {
  width: 400px;
}

.loging-btn {
  box-shadow: 2px 4px 11px #a4c2ff;
  margin-top: 10px;

  button {
    padding: 21px;
    font-size: 14px !important;
    width: 100%;
  }
}

.login-text {
  font-weight: bolder;
  font-size: 26px;
  letter-spacing: 2px;
  color: #fff;
  position: relative;
  display: flex;

  .login-line {
    z-index: -1;
    padding: 5px;
    position: relative;
    top: -8px;
    width: 100%;
    background-image: linear-gradient(to right, #6598ff, white);
  }
}

.login-text-small {
  margin-bottom: 20px;
  font-size: 13px;
  color: #7d7c7c;
}

.login-bg {
  // left: 0;
  // position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.project-name {
  // position: absolute;
  top: 40px;
  left: 40px;
  z-index: 9999;
  height: 80px;
  font-weight: bolder;
  background-image: linear-gradient(to right, #1850c1, #9c009c);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 38px;
}
</style>
<style lang="less" scoped>
.app-link {
  // font-weight: bolder;
  text-align: center;
  padding-top: 5px;
  font-size: 12px;
  width: 400px;
  padding-left: 40px;
  display: flex;

  a {
    flex: 1;
    position: relative;
    cursor: pointer;
    width: 70px;
    color: #666666;
    margin: 2px 10px 0 0;
  }

  img {
    display: none;
  }

  a:hover {
    color: #0545f6 !important;

    img {
      display: block;
      position: absolute;
      z-index: 999999999;
      top: -130px;
      width: 120px;
      left: -22px;

      border: 1px solid #b1b1b1;
    }
  }
}

.login-footer {
  position: absolute;
  width: 100%;
  bottom: 0.5rem;
  font-size: 15px;
  text-align: center;
  padding-bottom: 0px;
  color: #4f4f4f;

  a {
    margin-right: 10px;
    font-size: 15px;
    color: #4f4f4f;
  }

  div {
    margin-bottom: 5px;
  }

  a:hover {
    cursor: pointer;
    color: #0540e3 !important;
  }
}

.account-info {
  font-size: 15px;
  color: #636363;
  margin-top: 15px;
}
</style>

<style lang="less" scoped>
@media screen and (max-width: 700px) {
  .login-bg,
  .account-info,
  .app-link,
  .login-footer,
  .project-name {
    display: none;
  }

  .login-container {
    padding: 2rem;
    justify-content: center;
  }

  .login-form {
    width: 100%;
  }

  .form-user,
  .loging-btn {
    width: 100%;
  }
}
</style>